<template>
  <div>
      <div :id="id"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
      chartsData: {
          type: Array,
          default: () => []
      },
      title:{
        type: String,
        default:"",
      }
  },
  data(){
    return{
        id:Math.random()+'',
    }
  },
  created() {
    // this.id = 
      this.$nextTick(() => {
          this.pieBtn()
      })
  },
  mounted() {
    this.$nextTick(() => {
        this.pieBtn()
    })
  },
  methods: {

      pieBtn() {
         //检测是否已经存在echarts实例，如果不存在，则不再去初始化
         let myChart = echarts.getInstanceByDom(
            document.getElementById(this.id)
        );
        if (myChart == null) {
          myChart = echarts.init(document.getElementById(this.id));
        }
        // myChart.setOption(this.option);

        //   let myChart = echarts.init(document.getElementById('pie'))
          myChart.clear() //清空画布数据
        // this.chartsDom.setOption(this.option()) //设置对应的参数,标题,x轴,y轴坐标,以及显示的数据
          let option = {
              color: ['#9cd47d', '#f5918e', '#67c23a', '#67c23a', '#67c23a', '#67c23a'],
              title: {
                  text: this.title,
                  left: 'center'
              },
              grid: {
                  top: '0',
                  left: '0%',
                  right: '0%',
                  bottom: '0%',
                  containLabel: true
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  show: false
              },
              series: [{
                  type: 'pie',
                  radius: '50%',
                  labelLine: {
                      length: 5, // 改变标示线的长度
                      lineStyle: {
                          color: '#8c8c8c' // 改变标示线的颜色
                      }
                  },
                  label: {
                      alignTo: 'edge',
                      formatter: '{name|{b}}\n{time|{c} }',
                      edgeDistance: 10,
                      lineHeight: 30,
                      fontSize: 20,
                      rich: {
                          time: {
                              fontSize: 16,
                              color: '#262626'
                          }
                      },
                      textStyle: {
                          color: '#262626'
                      }
                  },
                  data: this.chartsData
              }]
          }
          myChart.setOption(option)
          // 让图表跟随屏幕自动的去适应
          window.addEventListener('resize', function () {
              myChart.resize()
          })
      }
  }
}
</script>
<style scoped>
div{
  /* width: 350px; */
  height: 250px;
  width: 100%;
  margin: 0 auto;
}
</style>